<template>
	<view class="title">实名信息</view>
	<view class="box" style="padding: 0 36rpx;width: 678rpx;margin: 36rpx 36rpx 0 36rpx;">
		<view class="i">姓名<text style="color: #90A1B9;">{{realName}}</text>
		</view>
		<view class="i">身份证号<text style="color: #90A1B9;">{{idNumber}}</text>
		</view>
	</view>
	<view class="title">请绑定账户本人的银行卡，仅支持绑定一张</view>
	<view class="box" style="padding: 0 36rpx;width: 678rpx;margin: 36rpx 36rpx 0 36rpx;">
		<view @click="type=1;this.$refs.popup.open()" class="i"><text style="width: 120rpx;">开户行</text><text
				:style="{'flex':1,'color':bankName?'#020618':'#90A1B9'}">{{bankName || '请选择开户行'}}</text>
			<image src="/static/icon/to_right.png" class="to_right" />
		</view>
		<view class="i"><text style="width: 120rpx;">银行卡号</text><input v-model="accountNumber" placeholder="请输入银行卡卡号"
				placeholder-style="color:#90A1B9;" />
		</view>
	</view>
	<view style="margin: 36rpx;font-size: 28rpx;">特别提示：您的银行卡、身份证和姓名信息将仅用于提现使用</view>
	<view class="btn" @click="popup"
		:style="{'background-color': (bankName && accountNumber)?'#FFDF20':'#CAD5E2','color': (bankName && accountNumber)?'##020618':'#ffffff'}">
		确认</view>

	<view class="mask" v-if="weibangding">
		<view class="dialog">
			<view
				style="height: 50rpx;font-size: 32rpx;font-weight: bold;height: 50rpx;line-height: 50rpx;position: absolute;top: 36rpx;left: 36rpx;">
				填写验证码</view>
			<image src="/static/icon/close.png" class="close" @click="weibangding=false" />
			<view class="content" style="font-size: 36rpx;width: 100%;">{{memberInfo.phoneTxt}}</view>
			<view
				style="margin-top: 30rpx;height: 100rpx;width: 100%;border-bottom: 1px solid #CAD5E2;font-size: 28rpx;display: flex;align-items: center;justify-content: space-between;gap: 50rpx;">
				<input v-model="smsCode" maxlength="4" placeholder="请输入短信验证码" style="height: 100%;width: 350rpx;"
					type="number" />
				<text style="color: #1447E6;" @click="sms" v-if="time==0">获取验证码</text>
				<text style="color: #62748E;" v-else>获取验证码（{{time}}s）</text>
			</view>
			<view class="btn_box">
				<view style="width: 100%;" @click="submit">确定</view>
			</view>
		</view>
	</view>

	<uni-popup ref="popup" type="bottom" border-radius="30rpx 30rpx 0 0" background-color="#fff" safe-area>
		<template v-if="type==1">
			<view
				style="display: flex;align-items: center;justify-content: space-between;height: 112rpx;width: 100%;padding: 36rpx;box-sizing: border-box;">
				<text style="font-size: 32rpx;font-weight: bold;justify-self: sta;">请选择开户银行</text>
				<image src="/static/icon/close.png" style="height: 40rpx;width: 40rpx;"
					@click="this.$refs.popup.close()">
				</image>
			</view>
			<scroll-view style="width: 100%;height: 60vh;" direction="vertical" scroll-y>
				<view v-for="item in bankList" :key="item.dictLabel" class="bank"
					@click="bankName=item.dictLabel;this.$refs.popup.close();">
					{{item.dictLabel}}
					<image src="/static/icon/to_right.png" class="to_right" />
				</view>
			</scroll-view>
		</template>

		<template v-else>
			<view
				style="display: flex;align-items: center;justify-content: flex-end;height: 112rpx;width: 100%;padding: 36rpx;box-sizing: border-box;">
				<image src="/static/icon/close.png" style="height: 40rpx;width: 40rpx;"
					@click="this.$refs.popup.close()">
				</image>
			</view>
			<view style="padding: 40rpx 0;display: flex;align-items: center;justify-content: center;width: 100%;">
				<view
					style="display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;font-size: 34rpx;">
					<view style="margin-bottom: 40rpx;">
						请核对银行卡信息，是否确认绑定？
					</view>
					<view style="margin-bottom: 20rpx;line-height: 50rpx;">
						<view style="color: #62748E;width: 170rpx;display: inline-block;">开户行：</view>{{bankName}}
					</view>
					<view style="line-height: 50rpx;">
						<view style="color: #62748E;width: 170rpx;display: inline-block;">银行卡号：</view>{{accountNumber}}
					</view>
				</view>
			</view>
			<view class="from_btn_box">
				<view class="reset" @click="this.$refs.popup.close()">返回修改</view>
				<view class="submit" @click="this.$refs.popup.close();weibangding=true;">确认</view>
			</view>
		</template>
	</uni-popup>
</template>

<script>
	import api from '@/utils/api.js';
	export default {
		data() {
			return {
				bankList: [],
				memberInfo: null,
				weibangding: false,
				bankName: null,
				accountNumber: null,
				smsCode: null,
				type: null,
				time: 0,
				realName: '',
				idNumber: ''
			}
		},
		async onLoad(options) {
			this.realName = options.realName;
			this.idNumber = options.idNumber;
			this.accountNumber = options.accountNumber || null;
			this.bankName = options.bankName || null;
			let {
				result = []
			} = await api.bank_list();
			this.bankList = result;

			let {
				result: memberInfo = null
			} = await api.member_info();
			if (memberInfo?.phone) {
				memberInfo.phoneTxt = memberInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			}
			this.memberInfo = memberInfo;
		},
		methods: {
			async sms() {
				if (this.time > 0) {
					uni.showToast({
						title: '请勿频繁操作',
						icon: 'error',
						duration: 1500
					})
					return;
				}
				this.time = 60;
				let interval = setInterval(() => {
					this.time -= 1;
					if (this.time == 0) {
						clearInterval(interval);
					}
				}, 1000)
				await api.sms(this.memberInfo.phone);
			},
			async submit() {
				if (!this.smsCode || this.smsCode.length != 4) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'error',
						duration: 1500
					})
					return;
				}
				await api.bind_bank_account({
					bankName: this.bankName,
					accountNumber: this.accountNumber,
					smsCode: this.smsCode,
				});
				uni.showToast({
					title: '绑定成功',
					icon: 'success',
					duration: 1500
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1500)
			},
			popup() {
				if (!this.bankName) {
					uni.showToast({
						title: '请选择开户行',
						icon: 'error',
						duration: 1500
					})
					return;
				}
				if (!this.accountNumber) {
					uni.showToast({
						title: '请输入银行卡号',
						icon: 'error',
						duration: 1500
					})
					return;
				}
				this.type = 2;
				this.$refs.popup.open();
			},
		}
	}
</script>

<style>
	.title {
		color: #90A1B9;
		font-size: 28rpx;
		height: 80rpx;
		padding: 40rpx 36rpx 0 36rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: start;
	}

	.i {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 40rpx;
		color: #62748E;
		font-size: 30rpx;
	}

	.box .i {
		border-bottom: 1px solid #E2E8F0;
	}

	.box .i:last-child {
		border: none;
	}

	.box .i input {
		flex: 1;
		height: 100%;
		color: #020618;
	}

	.to_right {
		height: 32rpx;
		width: 32rpx;
	}

	.bank {
		height: 100rpx;
		width: 678rpx;
		margin: 0 36rpx 20rpx 36rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		background-color: #F8FAFC;
		padding: 0 36rpx;
		box-sizing: border-box;
	}

	.btn {
		width: 678rpx;
		margin-left: 36rpx;
		font-size: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 30rpx;
		height: 100rpx;
	}
</style>